<template>
	<view class="content">
			<uv-search placeholder="请输入搜索内容" bgColor="#e3e3e3" v-model="keyword"></uv-search>
			<view class="banner" v-if="bannerList.length">
				<uv-swiper
				keyName="image"
				showTitle
				:list="bannerList" 
				radius="8" 
				indicatorMode="line" 
				height="160"
				indicator circular autoplay></uv-swiper>
			</view>
			<view class="notice">
				<uv-notice-bar text="项目数据仅为示例,非真实数据" bgColor="#fdf6ec"></uv-notice-bar>
			</view>
			<view class="waterfall">
				<uv-waterfall ref="waterfall"
					v-model="HomeList"
					:add-time="10"
					:left-gap="5"
					:right-gap="5"
					:column-gap="5"
					@changeList="changeList">
					<!--左瀑布-->
					<template v-slot:list1>
						<view>
							<view v-for="(item, index) in list1"
								:key="item.id"
								class="waterfall-item"
								@click="goDetail(item)">
								<view class="waterfall-item__image">
									<image :src="item.img" mode="widthFix"></image>
								</view>
								<view class="waterfall-item__title">{{ item.title }}</view>
								<view class="waterfall-item__times">{{ item.times }}</view>
								<view class="waterfall-item__tag">
									<view class="tag-one">{{ item.tag[0] }}</view>
									<view class="tag-two">{{ item.tag[1] }}</view>
								</view>
								<view class="tag-three" v-if="item.isDot">{{ item.isDot }}</view>
							</view>
						</view>	
					</template>	
						
						
					<!--右瀑布-->
					<template v-slot:list2>
						<view>
							<view v-for="(item, index) in list2"
								:key="item.id"
								class="waterfall-item"
								@click="goDetail(item)">
								<view class="waterfall-item__image">
									<image :src="item.img" mode="widthFix"></image>
								</view>
								<view class="waterfall-item__title">{{ item.title }}</view>
								<view class="waterfall-item__times">{{ item.times }}</view>
								<view class="waterfall-item__tag">
									<view class="tag-one">{{ item.tag[0] }}</view>
									<view class="tag-two">{{ item.tag[1] }}</view>
								</view>
								<view class="tag-three" v-if="item.isDot">{{ item.isDot }}</view>
							</view>
						</view>	
					</template>
				</uv-waterfall>			
			</view>
			<view class="toTop" v-if="showToTop">
				<uv-icon name="arrow-upward" @click="handleToTop()"></uv-icon>
			</view>
	</view>
</template>


<style>
	page{
		background-color: rgb(240,240,240);
	}
</style>
<script setup>
	import { getBanner,getHomeList } from '../../api/api';
	import { onLoad,onReachBottom,onPageScroll } from '@dcloudio/uni-app'
	import { ref,reative } from 'vue'
	
	const keyword=ref('')
	//轮播图列表
	const bannerList=ref([])
	//瀑布流列表
	const HomeList=ref([])
	const list1=ref([])
	const list2=ref([])
	const showToTop=ref(false)
	
	onLoad(()=>{
			getBanner().then(res=>{
				console.log(res,'res')
				bannerList.value=res.bannerList
			}),
			
			getHomeList().then(res => {
			  console.log(res, 'getHomeList');
			  HomeList.value = res;
			  // 清空 list1 和 list2，避免重复添加数据
			  list1.value = [];
			  list2.value = [];
			  HomeList.value.forEach(item => {
			    if (item.id % 2 === 1) {
			      // id 为奇数，存入 list1
			      list1.value.push(item);
			    } else {
			      // id 为偶数，存入 list2
			      list2.value.push(item);
			    }
			  });
			});
	    })
		
	onReachBottom(()=>{
		console.log("触底")
		setTimeout(()=>{
			addRandomData()
		},300)
	})
	
	const addRandomData=()=>{
	    let leftHeight = 0;
	    let rightHeight = 0;
	    // 假设可以通过某种方式获取到当前两列的高度，这里先简单模拟
	    // 例如通过获取list1和list2中所有元素的高度之和，这里假设每个元素高度固定为100rpx
	    list1.value.forEach(item => leftHeight += 100);
	    list2.value.forEach(item => rightHeight += 100);
	    for(let i=0;i<10;i++){
	        let index=uni.$uv.random(0,HomeList.value.length-1);
	        let item=JSON.parse(JSON.stringify(HomeList.value[index]));
	        item.id=uni.$uv.guid();
	        HomeList.value.push(item);
	        if (leftHeight <= rightHeight) {
	            list1.value.push(item);
	            leftHeight += 100;
	        } else {
	            list2.value.push(item);
	            rightHeight += 100;
	        }
	    }
	}
	
	onPageScroll((e) => {
			// 滚动距离超过 300rpx 时显示按钮，否则隐藏（可根据需求调整数值）
			showToTop.value = e.scrollTop > 300;
		});
	
	const handleToTop = () => {
			uni.pageScrollTo({
				scrollTop: 0, // 滚动到页面顶部（距离顶部0px）
				duration: 300, // 滚动动画时长（300毫秒，实现"平滑回到顶部"）
				fail: (err) => {
					console.error("回到顶部失败：", err); // 错误捕获，便于调试
				}
			});
		};
		
	const goDetail=(item)=>{
		const can =JSON.stringify(item)
		uni.navigateTo({
			url:`/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}
		
	const changeList=()=>{
		
	}
</script>


<style lang="scss" scoped>
	.banner {
	  margin-top: 5rpx;
	  margin-bottom: 20rpx; // 轮播图底部与通知栏的间距
	}
	.notice {
	  margin-top: 20rpx; // 通知栏顶部与轮播图的间距
	  margin-bottom: 20rpx; // 通知栏底部与瀑布流的间距（可选，可根据需求调整）
	}
	.content{
		padding:20rpx 20rpx;
	}
	.waterfall{
		margin:30rpx 0;
		.waterfall-item{
			margin:10rpx 10rpx 10rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			padding:16rpx;
			position: relative;
		}
		.waterfall-item__image {
		  width: 300rpx;
		  height: auto;
		  margin: 0 auto;
		  border: 1px solid #eee;
		  border-radius: 16rpx;
		  overflow: hidden;
		}
		.waterfall-item__image image {
		  width: 100%;
		  height: auto;
		}
		.waterfall-item__title{
			font-size: 30rpx;
			margin-top:10rpx;
			color:#303133;
		}
		.waterfall-item__times{
			font-size: 24rpx;
			color:#777;
			margin-top:10rpx;
		}
		.waterfall-item__tag{
			display: flex;
			margin-top:10rpx;
			.tag-one{
				border: 1px solid;
				color: #ffaa00;
				font-size:20rpx;
				display: flex;
				align-items: center;
				padding:4rpx 14rpx;
				border-radius: 50rpx;
			}
            .tag-two{
				border: 1px solid;
				color: #00aaff;
				font-size:20rpx;
				display: flex;
				align-items: center;
				padding:4rpx 14rpx;
				border-radius: 50rpx;
				margin-left: 20rpx;
			}
		}
		.tag-three{
			position: absolute;
			top:20rpx;
			right:20rpx;
			font-size: 24rpx;
			color:#fff;
			line-height:32rpx;
			background-color: #ff0000;
			text-align:center;
			border-radius: 10rpx;
			padding:4rpx 10rpx;
		}
	}
	.toTop {
	    /* 固定定位到右下方，避免随页面滚动消失 */
	    position: fixed;
	    right: 30rpx; /* 距离右侧 30rpx，适配不同屏幕 */
	    bottom: 80rpx; /* 距离底部 80rpx，避开可能的tabbar或其他底部元素 */
	    z-index: 999; /* 提高层级，确保不被其他内容遮挡 */
	    
	    /* 圆形边框 + 透明灰色背景 */
	    width: 80rpx; /* 按钮宽度（正方形，确保圆形） */
	    height: 80rpx; /* 按钮高度 */
	    border-radius: 50%; /* 圆形 */
	    border: 2rpx solid rgba(153, 153, 153, 0.6); /* 透明灰色边框（rgba控制透明度） */
	    background-color: rgba(245, 245, 245, 0.7); /* 浅灰透明背景，增强点击识别度 */
	    
	    /* 弹性布局让图标居中 */
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    
	    /* 轻微阴影，提升立体感 */
	    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: all 0.2s ease; // 过渡动画，让hover效果更丝滑
	  }
	  .toTop uv-icon {
	  	font-size: 40rpx;
	  	color: rgba(102, 102, 102, 0.8);
	  }
	  
	  	/* 新增：hover效果（增强用户反馈） */
	  	.toTop:hover {
	  	background-color: rgba(230, 230, 230, 0.8);
	  	border-color: rgba(120, 120, 120, 0.8);
	  }
</style>
